{% extends 'user/user.html' %}
{% load static %}
{% block haed_files %}
    <link rel="stylesheet" href="{% static 'css/order.css' %}">
    <script src="{% static 'js/modal_alert.min.js' %}"></script>
{% endblock haed_files %}
{% block title %}提交订单{% endblock title %}
{% block page_title %}提交订单{% endblock page_title %}
{% block index_block %}
    <div class="big_box">
        <div class="address">
            <div class="title">确认收货地址</div>
            <div class="bodys">
                <div class="goal">寄送到：</div>
                <ul>
                    {% for site in address %}
                        <li>
                            <label for="address{{forloop.counter}}"><input {% if site.is_default %}checked{% endif %} id="address{{forloop.counter}}" name="address" value="{{site.id}}" type="radio">{{site.addr}} ( {{site.receiver}} 收） {{site.phone}}</label>
                        </li>
                    {% endfor %}
                </ul>
                <a href="{% url 'user:user_site' %}">编辑收货地址</a>
            </div>
        </div>
        <div class="payment_method">
            <div class="title">支付方式</div>
            <div class="bodys">
                <ul>
                    <li>
                        <label for="cash_on_delivery">
                            <input id="cash_on_delivery" name="payment_method" value="1" type="radio">
                            <div>货到付款</div>
                        </label>
                    </li>
                    <li>
                        <label for="weixin" class="weixin">
                            <input id="weixin" name="payment_method" value="2" type="radio">
                            <div>微信支付</div>
                        </label>
                    </li>
                    <li>
                        <label for="alipay" class="alipay">
                            <input id="alipay" name="payment_method" value="3" type="radio">
                            <div>支付宝付</div>
                        </label>
                    </li>
                    <li>
                        <label for="credit_card" class="credit_card">
                            <input id="credit_card" name="payment_method" value="4" type="radio">
                            <div>银行卡支付</div>
                        </label>
                    </li>
                </ul>
            </div>
        </div>
        <div class="goods_list">
            <div class="title">商品列表</div>
            <div class="bodys">
                <div class="small_title">
                    <div class="name">商品名称</div>
                    <div class="unite">商品单位</div>
                    <div class="price">商品价格</div>
                    <div class="count">数量</div>
                    <div class="small_total">小计</div>
                </div>
                <ul>
                    {% for goods in goods_list %}
                        <li>
                            <div class="info">
                                <div class="serial_number">{{forloop.counter}}</div>
                                <img src="{{goods.image.url}}" alt="">
                                <div class="name">{{goods.name}}</div>
                            </div>
                            <div class="unite">{{goods.unite}}</div>
                            <div class="price">{{goods.price}}元</div>
                            <div class="count">{{goods.count}}</div>
                            <div class="small_total">{{goods.amount}}元</div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="total_price">
            <div class="title">总金额结算</div>
            <div class="bodys">
                <div class="total_prices">共 <span>{{total_count}}</span> 件商品，总金额 <strong>{{total_price}}</strong> 元</div>
                <div class="freight">运费： <strong>{{freight}}</strong> 元</div>
                <div class="real_payment">实付款： <strong>{{real_pay}}</strong> 元</div>
            </div>
        </div>
        <div class="submit_orders">
            {% csrf_token %}
            <a data-sku_ids="{{sku_ids}}" href="javascript:;">提交订单</a>
        </div>
    </div>
{% endblock index_block %}
{% block bottom_file %}
    <script>
        $(function () {
            let M = {};

            $('div.submit_orders > a').click(function(){
                let address = $('input[name="address"]:checked').val()
                let payment_method = $('input[name="payment_method"]:checked').val()
                let sku_ids = $(this).attr('data-sku_ids')
                let csrf_token = $('div.submit_orders > input[type=hidden]').val()
                //发送ajax post请求生成订单
                $.post(
                    '/order/commit',
                    {
                        'address':address,
                        'payment_method':payment_method,
                        'sku_ids':sku_ids,
                        'csrfmiddlewaretoken':csrf_token,
                    },
                    function(data){
                        if(data.res == 5){
                            //表示成功
                            if(M.dialog11){
                                return M.dialog11.show();
                            }
                            M.dialog11 = jqueryAlert({
                                'icon'    :  '{% static 'image/modal_right.png' %}',
                                'content' : '下单成功',
                                'closeTime': 1000,
                                'className': "my_modal",
                                'end': function () {
                                    // 成功提示结束后跳转到订单页面
                                    window,location.href = '/user/user_order/1'
                                }
                            })
                        }else{
                            if(M.dialog12){
                                return M.dialog12.show();
                            }
                            M.dialog12 = jqueryAlert({
                                'icon'    : '{% static 'image/modal_error.png' %}',
                                'content' : data.errmsg,
                                'closeTime': 2000,
                                'className': "my_modal",
                            })
                        }
                    }
                )
            })
        })
    </script>
{% endblock bottom_file %}